<template>
  <div class="report-card-wrapper">
    <van-row v-for="item in compList" :key="item.key">
      <component :is="item.headComp" />
      <component :is="item.contentComp" />
    </van-row>
    <p>{{ warning }}</p>
  </div>
</template>
<script>
import * as CONSTANTS from '@/constants/index'
import { mapGetters } from 'vuex'

export default {
  props: {},
  components: {},
  data() {
    return {
      CONSTANTS: Object.freeze(CONSTANTS),
      compList: [
        {
          key: '1',
          headComp: () => import('./ReportHead.vue'),
          contentComp: () => import('./ReportContent.vue'),
        },
        {
          key: '2',
          headComp: () => import('./HistoryListHead.vue'),
          contentComp: () => import('./HistoryListContent.vue'),
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['quiz']),
    historyList() {
      if (!this.quiz) return {}
      return this.quiz.historyList
    },
    warning() {
      const { pageNo, totalPage } = this.historyList

      if (pageNo * 1 > totalPage * 1)
        return this.CONSTANTS.LABEL_ISLOADMORE_FINISHED
      return this.CONSTANTS.LABEL_ISLOADMORE
    },
  },
  mounted() {},
  filters: {},
  watch: {},
  methods: {},
}
</script>

<style lang="less" scoped>
.report-card-wrapper {
  padding: 0 4%;
  // min-height: 100%;
  // background-color: #00ffff;
  // border-radius: 12px;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  background-color: #fff;

  & > p:last-of-type {
    text-align: center;
    border-top: 68px solid transparent;
    border-bottom: 28px solid transparent;
    line-height: 12px;
    font-family: 'SourceHanSansCN-Normal';
    font-size: 12px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: rgba(0, 0, 0, 0.5);
  }
}
</style>
